<script setup lang="ts">
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { img, video } from "@/source";
// import { useDebounceFn } from "@vueuse/core";
import VideoSwiper from "@/components/VideoSwiper/index.vue";
import ImageSwiper from "@/components/ImageSwiper/index.vue";
import SwiperTitleWrap from "@/components/swiperTitleWrap/index.vue";
import type { DataType } from "@/components/swiperTitleWrap/index.vue";

// 注册ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

// 变体引擎section组件Ref
const variantRef = ref();
// 高效体验视频轮播视频组件ref
const EfficiencyVideoSwiperRef = ref();
// 当前滚动方向
const dirction = ref("up");
// 所有具有 f-title-wrap 类名的容器监视器
const titleWrapOb = ref<IntersectionObserver>();
//
const shieldOb = ref<IntersectionObserver>();
const aliveDesign = [
  {
    imgArr: [{ src: img.alivedesign1 }, { src: img.alivedesign2 }],
  },
  {
    imgArr: [{ src: img.alivedesign3 }, { src: img.alivedesign4 }],
  },
  {
    imgArr: [{ src: img.alivedesign9 }, { src: img.alivedesign10 }],
  },
  {
    imgArr: [{ src: img.alivedesign7 }, { src: img.alivedesign8 }],
  },
  {
    imgArr: [{ src: img.alivedesign9 }, { src: img.alivedesign10 }],
  },
];

// 轮播视频数组数据
const videoData = reactive({
  // aicy识屏轮播视频数组数据
  aicy: [
    { src: video.recognitioncard },
    { src: video.recognitionbbankcard },
    { src: video.recognitiontranslate },
  ],
  // 高效体验视频轮播
  efficiency: {
    // 小窗
    smallWindow: [
      { src: video.smallwindow },
      { src: video.ingerprintquickstart },
    ],
  },
});

// 轮播图片数据数组
const imageData = reactive({
  smartLabel: [{ src: img.smartlabel1 }, { src: img.smartlabel }],
});

// 标题图片轮播数据
const titleData = reactive({
  part1: [
    {
      subTitle: "动态分类内存回收",
      describe: "超长时间保活应用，再次启动疾速复活，任务切换更畅快。",
      imgUrl: img.memoryoptimization1,
    },
    {
      subTitle: "纳秒级动效计算",
      describe:
        "时钟精度千倍提升，动效计算结果更符合设计预期，帧异常抖动有效减少，每次滑动都更加平滑流畅。 ",
      imgUrl: img.memoryoptimization2,
    },
  ] as Array<DataType>,
  part2: [
    {
      subTitle: " VIP 资源调度 ",
      describe: " 实现更多系统资源向前台任务倾斜，确保主要任务得以流畅运行。 ",
      imgUrl: img.memoryoptimization3,
    },
    {
      subTitle: " 游戏极速模式 ",
      describe: " 移动网络加速，游戏更低延时、卡顿次数更少。 ",
      imgUrl: img.memoryoptimization4,
    },
  ] as Array<DataType>,
  part3: [
    {
      subTitle: " MRG 多轨能效调频 ",
      describe:
        " 根据不同 CPU 簇能效比结合应用场景，采用能效最佳的调频方案，有效提升续航。 ",
      imgUrl: img.memoryoptimization5,
    },
    {
      subTitle: " 魔术空间压缩 ",
      describe:
        " 重复文件、应用文件无损压缩，最大化节省存储空间，空间充裕更耐用。 ",
      imgUrl: img.memoryoptimization6,
    },
    {
      subTitle: " 魔术存储收纳 ",
      describe:
        " 高敏感度的收纳机制，自动整理存储碎片、空洞，读写性能常用常新，流畅体验经久不衰。 ",
      imgUrl: img.memoryoptimization7,
    },
  ] as Array<DataType>,
});

// 个性化设置
const personal = [
  { src: img.personal1 },
  { src: img.personal2 },
  { src: img.personal3 },
  { src: img.personal4 },
  { src: img.personal5 },
];

onMounted(() => {
  loadingSection1();
  AliveDesign();
  // screen();
  // romContainer();
  AliveUI();
  newDesign();
  wordDesign();
  personalDesign();
  knowledge();
  variant();
  engine();
  lipro();
  shield();
  experience();
  onemindTitle();
  privacySafe();
  depositBox();
  stealth();
  sharedScreen();
  artifact();

  titleWrap();
});

onBeforeUnmount(() => {
  const shield = document.querySelector(".shield") as HTMLElement;
  const wrap = document.querySelectorAll(".f-title-wrap");
  // 取消监听带有 f-title-wrap 类名的容器
  wrap.forEach((w) => {
    // 取消监听
    titleWrapOb.value?.unobserve(w);
  });
  shieldOb.value!.unobserve(shield);
});

//#region
// 加载section1动画
function loadingSection1() {
  ScrollTrigger.create({
    trigger: ".flyme10",
    start: "top top",
    end: "+=250",
    // 显示标记
    // markers: true,
    // 动画进度跟滚动条进度链接到一起
    scrub: true,
    animation: gsap
      .timeline()
      .to(".slogan", {
        yPercent: -50,
        opacity: 0,
      })
      .to(".tvc", {
        scale: 1,
      }),
  });
}

// 第二屏
function AliveDesign() {
  ScrollTrigger.create({
    trigger: ".alive-design",
    start: "+=600",
    end: "+=2500",
    // 显示标记
    // markers: true,
    // 动画进度跟滚动条进度链接到一起
    scrub: true,
    animation: gsap
      .timeline()
      .fromTo(
        ".purple",
        {
          xPercent: 0,
          opacity: 1,
          scale: 1,
        },
        {
          xPercent: -100,
          opacity: 0,
          scale: 0.3,
        }
      )
      .fromTo(
        ".design",
        {
          xPercent: 0,
          opacity: 1,
          scale: 1,
        },
        {
          xPercent: 100,
          opacity: 0,
          scale: 0.3,
        },
        "<"
      )
      .fromTo(
        ".lock",
        {
          width: 10,
          height: 10,
        },
        {
          width: "10em",
          height: "10em",
          opacity: 1,
        },
        "<"
      )
      .to(".lock", {
        // 消失
        scale: 0.01,
        opacity: 0,
      })
      .to(".center div:first-child", {
        // ul列表第一项开始显示
        opacity: 1,
      })
      .fromTo(
        ".lock-page .design-snapshot", // ul列表
        {
          scale: 1.3,
        },
        {
          scale: 1,
          y: "-15vh",
        }
      )
      .to(
        ".lock-page .design-snapshot li div",
        {
          opacity: 1,
        },
        "<"
      )
      .to(
        ".lock-page .design-snapshot li:nth-child(2n + 1)", // 奇数li列
        {
          y: "-7vh",
          opacity: 1,
        },
        "<"
      )
      .to(
        ".lock-page .design-snapshot li:nth-child(2n)", // 偶数li列
        {
          y: "7vh",
          opacity: 1,
        },
        "<"
      )
      .to(
        ".lock-page .design-snapshot li:nth-child(2n)", // 偶数li列
        {
          y: "-17vh",
        }
      )
      .fromTo(
        ".alive-design",
        {
          backgroundColor: "rgb(0, 0, 0)",
        },
        {
          backgroundColor: "rgb(239, 241, 245)",
        }
      ),
  });
}

// 第三屏
function AliveUI() {
  // ScrollTrigger.create({
  //   trigger: ".alive-ui",
  //   start: "-=300",
  //   end: "top top",
  //   animation: gsap
  //     .timeline()
  //     .fromTo(".f-title-wrap", { y: 84, opacity: 0 }, { y: 0, opacity: 1 })
  //     .fromTo(
  //       ".content",
  //       { y: 84, opacity: 0, delay: 2 },
  //       { y: 0, opacity: 1 }
  //     ),
  // });

  const dom = document.querySelector(".alive-ui") as HTMLElement;
  transYOpacity(dom, {
    animation: gsap
      .timeline()
      .fromTo(
        ".alive-ui .f-title-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 }
      )
      .fromTo(
        ".alive-ui .content",
        { y: 84, opacity: 0, delay: 2 },
        { y: 0, opacity: 1 }
      ),
  });
}

// 第四屏 应用焕新
function newDesign() {
  const dom = document.querySelector(".new-design") as HTMLElement;
  transYOpacity(dom, {
    animation: gsap
      .timeline()
      .fromTo(
        ".new-design .title-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 }
      ),
  });

  // 应用焕新多列ul
  ScrollTrigger.create({
    trigger: ".new-design-ul",
    start: "-=600",
    end: "+=600",
    // markers: true,
    scrub: true,
    animation: gsap
      .timeline()
      .fromTo(
        ".new-design-ul .new-design-item:nth-child(3)",
        { y: "30vh", scale: 1.3 },
        { y: "-20px", scale: 1 }
      ) // 中间那个先动
      .fromTo(
        ".new-design-ul .new-design-item:first-child",
        { y: "187.6px", opacity: 0, duration: 2 },
        { y: "40px", opacity: 1, duration: 2 }
      ) // 其次左右两排一起动
      .fromTo(
        ".new-design-ul .new-design-item:nth-child(2)",
        { y: "375.2px", opacity: 0, duration: 2 },
        { y: "90px", opacity: 1, duration: 2 },
        "<"
      ) // 其次左右两排一起动
      .fromTo(
        ".new-design-ul .new-design-item:nth-child(4)",
        { y: "469px", opacity: 0, duration: 2 },
        { y: "90px", opacity: 1, duration: 2 },
        "<"
      ) // 其次左右两排一起动
      .fromTo(
        ".new-design-ul .new-design-item:last-child",
        { y: "281.4px", opacity: 0, duration: 2 },
        { y: "40px", opacity: 1, duration: 2 },
        "<"
      ), // 其次左右两排一起动
  });
}

// 第五屏 word-design
function wordDesign() {
  const wall = document.querySelector(".wall") as HTMLElement;
  wall.style.backgroundImage = `url(${img.worddesign})`;
  ScrollTrigger.create({
    trigger: ".word-design",
    start: "-=200",
    end: "+=2000",
    // markers: true,
    scrub: true,
    animation: gsap.timeline().fromTo(wall, { scale: 2 }, { scale: 1 }),
  });
}

// 第六屏 personal-design
function personalDesign() {
  const personal = document.querySelector(".personal-design") as HTMLElement;
  transYOpacity(personal, {
    start: "-=800",
    end: "bottom bottom",
    // markers: true,
    animation: gsap
      .timeline()
      .fromTo(
        ".personal-design .f-title-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 }
      )
      .fromTo(
        ".personal-design .img-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 }
      ),
  });
}

// 第七屏 知意动效架构
function knowledge() {
  // 获取视频标签
  const weathermp4 = document.querySelector(".weathermp4") as HTMLVideoElement;
  const content = document.querySelector(".video-wrap .content") as HTMLElement;
  weathermp4.src = video.weathermp4;
  const section = document.querySelector(
    'section[tag="section"]'
  ) as HTMLElement;
  // 创建观察器
  const ob = new IntersectionObserver(
    (entries: IntersectionObserverEntry[]) => {
      entries.forEach((item) => {
        // isIntersecting元素是否进入到视口内
        if (item.isIntersecting) {
          // 切换亮色主题类名
          section.classList.add("light");
        } else {
          content.style.transform = "scale(1)";
          weathermp4.currentTime = 0;
          weathermp4.poster = img.weatherposter;
          section.classList.remove("light");
        }
      });
    }
  );

  ScrollTrigger.create({
    trigger: section,
    start: "+=300",
    end: "+=600",
    // markers: true,
    // 监听滚动条滚动事件，滚动条只要滚动就一直触发
    onUpdate(self) {
      // 播放视频
      try {
        weathermp4.currentTime = self.progress * weathermp4.duration || 0;
      } catch (e) {
        console.log("知意动效架构处视频播放出错==>", e);
      }
    },
  });

  ob.observe(variantRef.value);
}

// 第八屏 变体引擎
function variant() {
  const dom = document.querySelector(".variant") as HTMLElement;
  transYOpacity(dom, {
    start: "-=800",
    // markers: true,
    animation: gsap
      .timeline()
      .fromTo(".f-title-wrap", { y: 84, opacity: 0 }, { y: 0, opacity: 1 })
      .fromTo(
        ".variant .content",
        { y: 84, opacity: 0, delay: 1 },
        { y: 0, opacity: 1, delay: 1 },
        "<"
      ),
  });
}

// 第九屏 智慧解析引擎
function engine() {
  const dom = document.querySelector(".engine") as HTMLElement;
  transYOpacity(dom, {
    // markers: true,
    animation: gsap
      .timeline()
      .fromTo(".f-title-wrap", { y: 84, opacity: 0 }, { y: 0, opacity: 1 })
      .fromTo(
        ".engine video",
        { y: 84, opacity: 0, delay: 1 },
        { y: 0, opacity: 1, delay: 1 },
        "<"
      ),
  });
}

// 第十屏 居家场景，自动控制
function lipro() {
  const dom = document.querySelector(".lipro") as HTMLElement;
  transYOpacity(dom, {
    animation: gsap
      .timeline()
      .fromTo(".f-title-wrap", { y: 84, opacity: 0 }, { y: 0, opacity: 1 })
      .fromTo(
        ".lipro div:not(:first-child)",
        { y: 84, opacity: 0, delay: 1 },
        { y: 0, opacity: 1, delay: 1 },
        "<"
      ),
  });
}

// 第十一屏 Aicy全新升级
function shield() {
  const dom = document.querySelector(".shield") as HTMLElement;
  const frameDom = document.querySelector(".frame") as HTMLElement;
  transYOpacity(dom, {
    start: "-=100",
    end: "+=500",
    // markers: true,
    // scrub: true,
    animation: gsap
      .timeline()
      .fromTo(".left", { x: "5vw" }, { x: 0 })
      .fromTo(".right", { x: "-5vw" }, { x: 0 }, "<"),
  });
  frameRotate();
  shieldOb.value = new IntersectionObserver(
    (entries: IntersectionObserverEntry[]) => {
      entries.forEach((item) => {
        if (item.isIntersecting) {
          dirction.value == "up" && frameRotate();
        }
      });
    }
  );

  shieldOb.value.observe(frameDom);
}

// Aicy全新升级 旋转动画效果 ，每次调用都会从360度旋转到0度
function frameRotate() {
  const dom = document.querySelector(".shield") as HTMLElement;
  transYOpacity(dom, {
    start: "-=100",
    end: "+=500",
    animation: gsap
      .timeline()
      .fromTo(
        ".shield .frame",
        { rotate: "360deg", scale: 0 },
        { rotate: "0deg", scale: 1 }
      ),
  });
}

// 第十三屏 高效体验
function experience() {
  const dom = document.querySelector(".experience") as HTMLElement;
  transYOpacity(dom, {
    start: "-=300",
    end: "+=780",
    // markers: true,
    scrub: true,
    animation: gsap
      .timeline()
      .fromTo(".experience .left", { x: "205px" }, { x: "-20px" })
      .fromTo(
        ".experience strong:last-child",
        { x: "-205px" },
        { x: "20px" },
        "<"
      )
      .fromTo(
        ".experience .img-wrap",
        { scale: 0, opacity: 0 },
        { scale: 1, opacity: 1 },
        "<"
      )
      .fromTo(
        ".experience .top",
        { x: "-140px", y: "-140px" },
        { x: 0, y: 0 },
        "<"
      )
      .fromTo(
        ".experience .bottom",
        { x: "140px", y: "140px" },
        { x: 0, y: 0 },
        "<"
      ),
  });
}

// 第十五屏 onemind-title
function onemindTitle() {
  const dom = document.querySelector(".onemind-title") as HTMLElement;
  transYOpacity(dom, {
    end: "+=500",
    // markers: true,
    scrub: true,
    animation: gsap
      .timeline()
      .fromTo(".onemind-title img", { scale: 0.5 }, { scale: 1 }),
  });
}

// 第十八屏 隐私安全
function privacySafe() {
  const dom = document.querySelector(".privacy-safe") as HTMLElement;
  transYOpacity(dom, {
    start: "-=100",
    end: "+=500",
    // markers: true,
    scrub: true,
    animation: gsap
      .timeline()
      .fromTo(
        dom,
        { backgroundColor: "rgb(255, 255, 255)", duration: 2 },
        { backgroundColor: "rgb(0, 0, 0)" }
      )
      .fromTo(".privacy-safe .left", { x: "81.7493px" }, { x: "-6.4vw" }, "<")
      .fromTo(
        ".privacy-safe strong:last-child",
        { color: "rgb(0, 0, 0)", x: "-81.7493px" },
        { color: "rgb(255, 255, 255)", x: "6.4vw" },
        "<"
      )
      .fromTo(
        ".privacy-safe img",
        { opacity: 0, scale: 0, delay: 1 },
        { opacity: 1, scale: 1, delay: 1 },
        "<"
      ),
  });
}

// 第十九屏 私密保险箱
function depositBox() {
  const dom = document.querySelector(".deposit-box") as HTMLElement;
  transYOpacity(dom, {
    start: "-=100",
    // markers: true,
    animation: gsap
      .timeline()
      .fromTo(
        ".deposit-box .f-title-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 }
      )
      .fromTo(
        ".deposit-box img",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 },
        "<"
      ),
  });
}

// 第二十屏 隐身模式
function stealth() {
  const dom = document.querySelector(".stealth") as HTMLElement;
  transYOpacity(dom, {
    start: "-=100",
    animation: gsap
      .timeline()
      .fromTo(
        ".stealth .f-title-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 }
      )
      .fromTo(".stealth img", { y: 84, opacity: 0 }, { y: 0, opacity: 1 }, "<"),
  });
}

// 第二十一屏 共享屏幕隐私保护
function sharedScreen() {
  const dom = document.querySelector(".shared-screen") as HTMLElement;
  transYOpacity(dom, {
    animation: gsap
      .timeline()
      .fromTo(
        ".shared-screen .f-title-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 }
      )
      .fromTo(
        ".shared-screen .img-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 },
        "<"
      ),
  });
}

// 第二十二屏 四大神器，持续守护
function artifact() {
  const dom = document.querySelector(".artifact") as HTMLElement;
  transYOpacity(dom, {
    animation: gsap
      .timeline()
      .fromTo(
        ".artifact .f-title-wrap",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 }
      )
      .fromTo(
        ".artifact img",
        { y: 84, opacity: 0 },
        { y: 0, opacity: 1 },
        "<"
      ),
  });
}

//#endregion
/**
 * 所有标题中带有 f-title-wrap类名的监听函数
 * @description 每次出现在视口都会调用相对于存在的section块函数
 */
function titleWrap() {
  const wrap = document.querySelectorAll(".f-title-wrap");
  // 触发条件，进入页面的 4/5 时触发, window.innerHeight 代表浏览器窗口高度，不包含tags标签上面那些东西
  const triggle = (window.innerHeight * 4) / 5;
  // 创建观察器
  titleWrapOb.value = new IntersectionObserver(
    (entries: IntersectionObserverEntry[]) => {
      entries.forEach((item) => {
        const boxTop = item.target.getBoundingClientRect().top;
        // isIntersecting元素是否进入到视口内
        if (item.isIntersecting && boxTop > triggle) {
          const parentName = item.target.parentElement?.classList[0];
          // 刷新指定块动画
          handleRefreshTitleWrap(parentName);
        }
      });
    },
    {}
  );

  wrap.forEach((w) => {
    titleWrapOb.value!.observe(w);
  });
}

function transYOpacity(
  trigger: HTMLElement,
  options: ScrollTrigger.StaticVars
) {
  const p = Object.assign(
    {
      trigger: trigger,
      start: "-=300",
      end: "top top",
    },
    options
  );
  ScrollTrigger.create(p);
}

// 刷新带有 'f-title-wrap' 类名的盒子动画
function handleRefreshTitleWrap(key: string | undefined) {
  const fn = {
    "alive-ui": AliveUI,
    "personal-design": personalDesign,
    "new-design": newDesign,
    variant: variant,
    engine: engine,
    lipro: lipro,
    "deposit-box": depositBox,
    stealth: stealth,
    "shared-screen": sharedScreen,
    artifact: artifact,
  };
  // const k = key as keyof typeof fn;
  if (fn[key as keyof typeof fn]) {
    fn[key as keyof typeof fn]();
  }
}

/**
 * 滚动防抖（无用）
 * @description 防抖：频繁事件只会在指定时间内触发一次
 */
// 上次滚动
// const lastScrollTop = ref(0);
// const handleScroll = useDebounceFn(
//   () => {
//     const scrollTop = document.documentElement.scrollTop;
//     const delta = scrollTop - lastScrollTop.value;
//     if (delta < 0) {
//       // 往上滚动
//       // console.log("往上滚动");
//       dirction.value = "up";
//     } else {
//       // 往下滚动
//       // console.log("往下滚动");
//       dirction.value = "down";
//     }

//     lastScrollTop.value = scrollTop;
//   },
//   100,
//   { maxWait: 5000 }
// );

defineOptions({
  name: "HomeIndex",
});
</script>

<template>
  <div class="meizu">
    <!-- 第一屏背景 -->
    <section class="section1 flyme10 relative z-21">
      <div class="sticky-content">
        <div class="slogan">
          <p>知意无界</p>
          <p>畅联随行</p>
          <button>观看视频</button>
        </div>

        <!-- 首屏背景 -->
        <div class="tvc">
          <img :src="img.flyme10Bg" :draggable="false" />
        </div>
      </div>
    </section>

    <!-- 第二屏 Alive Design -->
    <section class="section2 alive-design">
      <div class="sticky-content">
        <div class="title-wrap">
          <strong class="purple">Alive</strong>
          <img class="lock" src="~@/assets/img/lock-page.png" />
          <strong class="design">Design</strong>
        </div>

        <div class="lock-page">
          <ul class="design-snapshot">
            <li
              v-for="(alive, index) in aliveDesign"
              :key="index"
              :class="{ center: index + 1 == 3 }"
            >
              <div v-for="img in alive.imgArr">
                <img class="phone-content" alt="锁屏壁纸" :src="img.src" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <!-- 第三屏 图标重塑 -->
    <section class="alive-ui">
      <div class="f-title-wrap">
        <h2 class="f-title">图标重塑</h2>
        <p class="f-describe">
          全新色彩体系、更多精致光影，为图标与插件赋予新的生命力，鲜活而立体。
        </p>
      </div>

      <div class="content">
        <img :src="img.applicationlogo" />
      </div>
    </section>

    <!-- 第四屏 应用焕新 -->
    <section class="new-design f-section z-21 relative">
      <div class="f-sticky-content">
        <div class="title-wrap f-title-wrap">
          <h2 class="f-title f-title text-center">应用焕新</h2>
          <p class="mt-8px text-center f-describe">
            电话、时钟、图库、查找等应用，通通以全新姿态亮相；更有全新的笔记、Flyme
            Pay 等你探索体验。
          </p>
        </div>

        <ul class="new-design-ul">
          <li class="new-design-item">
            <div><img :src="img.app1" alt="系统外观" /></div>
            <div><img :src="img.app6" alt="音乐" /></div>
          </li>
          <li class="new-design-item">
            <div><img :src="img.app2" alt="秒表" /></div>
            <div><img :src="img.app7" alt="邮件" /></div>
          </li>
          <li class="new-design-item">
            <div><img :src="img.app3" alt="步数统计" /></div>
            <div><img :src="img.app8" alt="蓝牙连接" /></div>
          </li>
          <li class="new-design-item">
            <div><img :src="img.app4" alt="手机管理" /></div>
            <div><img :src="img.app9" alt="信息" /></div>
          </li>
          <li class="new-design-item">
            <div><img :src="img.app5" alt="相册" /></div>
            <div><img :src="img.app10" alt="锁屏" /></div>
          </li>
        </ul>
      </div>
    </section>

    <!-- 第五屏 word-design  -->
    <section class="word-design relative z-20">
      <div class="sticky-content sticky">
        <div class="wall"></div>
      </div>
    </section>

    <!-- 第六屏 轻松打造个性化外观  -->
    <section class="personal-design">
      <div class="f-title-wrap">
        <h2 class="f-title text-center text-#fff m0 p0">轻松打造个性化外观</h2>
        <p class="mt-8px text-center f-describe">
          息屏、锁屏、桌面，通过系统外观编辑器一站式设置，轻松打造专属个性系统。
        </p>
      </div>

      <div class="img-wrap">
        <img
          v-for="(p, i) in personal"
          :key="i"
          :src="p.src"
          alt="个性化设置"
        />
      </div>
    </section>

    <!-- 第七屏 知意动效架构 -->
    <section tag="section" class="bg-#000 f-section">
      <div class="bg" :style="`background-image: url(${img.starmask});`">
        <h2 class="title">知意动效架构</h2>
      </div>

      <div class="video-wrap f-sticky-content">
        <div class="content">
          <div class="text-center pb-7.9vh m0 relative z-20">
            <h2 class="f-title text-#fff text-center">如然引擎</h2>
            <p class="f-describe f-describe-night text-center">
              全新的如然引擎，带来丰富自然的视效体验。天气使用新引擎，还原更多天气场景，阴晴风雨日夜交替动态变换，如然生动。
            </p>
          </div>

          <video muted :poster="img.weatherposter" class="weathermp4">
            <!-- <source src="~@/assets/video/weather.mp4" type="video/mp4" /> -->
            <source :src="video.weathermp4" type="video/mp4" />
          </video>

          <div class="footnote flex items-center justify-center">
            <img class="unitylogo w-80px" :src="img.unity" alt="unitylogo" />
            <p class="descible">
              如然引擎所构建的动态天气效果 POWERED BY Unity
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 第八屏 变体引擎 -->
    <section ref="variantRef" class="variant">
      <div class="f-title-wrap">
        <h2 class="f-title m0 p0 text-center">变体引擎</h2>
        <p class="f-describe m0 p0 text-center">
          变体引擎可将不同视觉元素自然变形、有机衔接，打造无缝超顺滑视觉体验。
        </p>
      </div>

      <ul class="content">
        <li class="green">
          <div class="desc">
            <h6>手机管家</h6>
            <p>
              根据交互状态，在不同形态间实时流转变形，如同鲜活生命，有着自然的反馈。
            </p>
          </div>
          <video autoplay muted loop>
            <source :src="img.securitycenter" type="video/mp4" />
          </video>
        </li>
        <li>
          <div class="desc">
            <h6>插件打开</h6>
            <p>应用本体和插件之间形态自如变化，体验如丝般顺滑。</p>
          </div>
          <video autoplay muted loop>
            <source :src="img.plugins" type="video/mp4" />
          </video>
        </li>
      </ul>
    </section>

    <!-- 第九屏 智慧解析引擎 -->
    <section class="engine f-section">
      <div class="f-title-wrap">
        <h2 class="f-title text-center">智慧解析引擎</h2>
        <p class="f-describe text-center">
          智慧解析引擎可将对象智能拆解，从而重构出千变万化的视觉动效，妙趣横生。
        </p>
      </div>

      <video muted loop autoplay>
        <source :src="img.engine" type="video/mp4" />
      </video>
    </section>

    <!-- 第十屏 居家场景，自动控制  -->
    <section class="lipro f-section">
      <div class="f-title-wrap">
        <h2 class="f-title text-center">居家场景，自动控制</h2>
        <p class="f-describe text-center">
          自定义各种生活场景，自动控制多个设备定时开关，打造专属于自己的智能家居生态空间。
        </p>
      </div>

      <div class="flex justify-center">
        <div class="mode flex items-end">
          <img :src="img.furniture2" class="furniture" />
          <p class="desc desc1"></p>
          <div class="control flex items-end justify-center">
            <img :src="img.liproapp2" alt="lipro开关" class="lipro-app" />
          </div>
        </div>
      </div>

      <div class="flex justify-center">
        <div class="mode flex items-end">
          <div class="control flex items-end justify-center">
            <img :src="img.liproapp1" alt="lipro开关" class="lipro-app" />
          </div>
          <img :src="img.furniture1" class="furniture" />
          <p class="desc desc1"></p>
        </div>
      </div>
    </section>

    <!-- 第十一屏 Aicy全新升级 -->
    <section class="shield flex-section flex justify-center items-center">
      <strong class="left m0 p0">Aicy</strong>
      <img class="frame" src="@/assets/img/aicy.png" :draggable="false" />
      <strong class="right m0 p0">全新升级</strong>
    </section>

    <!-- 第十二屏 Aicy 识屏 -->
    <section class="aicy-features-wrap">
      <div class="aicy-features">
        <div class="card-list-wrap">
          <ul class="card-list">
            <li class="card-item card-item-large card-content row">
              <div class="left-part">
                <strong class="f-label tag green">Aicy 识屏</strong>
                <h3 class="f-title m0 p0">全局可见可选</h3>
                <p class="f-describe mt-8px">
                  智能识别页面中的图文信息，<br />
                  灵活提取关键信息进行编辑、分享和搜索等操作。
                </p>
              </div>

              <div class="right-part embed-image relative">
                <video
                  autoplay
                  muted
                  loop
                  class="phone-frame blend-mode-darken"
                >
                  <source :src="video.recognitiontext" type="video/mp4" />
                </video>
              </div>
            </li>

            <li class="card-item card-content">
              <h4 class="f-label">视频抓取图片</h4>
              <p class="f-describe">
                播放视频时，<br />
                可快速从视频中抓取出无界面干扰的纯净图片。
              </p>
              <div>
                <video
                  autoplay
                  muted
                  loop
                  style="width: 252px; margin-top: 40px; margin-left: 140px"
                >
                  <source :src="video.catchphoto" type="video/mp4" />
                </video>
              </div>
            </li>

            <li class="card-item card-content">
              <h4 class="f-label">图片识取主体</h4>
              <p class="f-describe">
                智能识别并提取图片中的主体对象，<br />
                快速分享到其他应用或用作图片编辑器中的个性贴纸。
              </p>
              <div class="embed-image bottom-part">
                <img :src="img.phoneframe" alt="手机框" class="phone-frame" />
                <img
                  :src="img.recognitionimage"
                  alt="智能识别图片"
                  class="phone-content"
                />
              </div>
            </li>

            <li class="card-item card-item-large card-content row">
              <div class="left-part">
                <strong class="f-label tag orang">Aicy 扫一扫</strong>
                <h3 class="f-title m0 p0">智能扫描助手</h3>
                <p class="f-describe mt-8px">
                  扫描文档、图像、名片、证件，<br />
                  并快速提取当中的文字信息，进而一键复制、翻译，<br />
                  甚至生成打印文件。
                </p>
              </div>

              <div class="right-part embed-image">
                <VideoSwiper :video-data="videoData.aicy" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <!-- 第十三屏 高效体验 -->
    <section class="experience f-section flex items-center justify-center">
      <strong class="f-headline left">高效</strong>
      <div class="img-wrap">
        <img width="278" height="278" class="top" :src="img.cuboid2" alt="" />
        <img
          width="278"
          height="278"
          class="bottom"
          :src="img.cuboid1"
          alt=""
        />
      </div>
      <strong class="f-headline">体验</strong>
    </section>

    <!-- 第十四屏 小窗 -->
    <section class="efficiency">
      <div class="card-list-wrap">
        <dl class="card-list">
          <dt class="small-window">
            <div class="card-item card-item-large card-content row">
              <div class="left-part">
                <div class="title-wrap active">
                  <h4 class="f-label">小窗一步贴边</h4>
                  <p class="f-describe">
                    除了悬浮小窗贴边，现在小窗也支持一步贴边了，小窗应用与背景应用切换自如，便捷高效。
                  </p>
                </div>

                <div class="title-wrap">
                  <h4 class="f-label">悬浮小窗缩放</h4>
                  <p class="f-describe">
                    通过双指，即可实现悬浮小窗放大缩小，内容查看更加随心所欲。
                  </p>
                </div>
              </div>

              <div class="right-part embed-image">
                <VideoSwiper
                  ref="EfficiencyVideoSwiperRef"
                  :video-data="videoData.efficiency.smallWindow"
                />
              </div>
            </div>
          </dt>

          <dd class="card-item card-item-large card-content row reverse">
            <div class="right-part embed-image">
              <div class="video-wrap phone-frame">
                <video autoplay loop muted>
                  <source :src="video.aggregatepayment" type="video/mp4" />
                </video>
              </div>
            </div>
            <div class="left-part">
              <h4 class="f-label">小窗聚合启动</h4>
              <p class="f-describe">
                从锁屏到开启常用应用或功能合集，轻轻一按，一气呵成。
              </p>
            </div>
          </dd>

          <dd class="card-item card-item-large smart-label card-content row">
            <div class="left-part">
              <h3 class="f-title">智能标签</h3>
              <p class="f-describe">
                根据信息内容，动态显示对应标签，轻轻一点便能直达想要查看的信息类型。
              </p>
            </div>
            <div class="right-part embed-image">
              <ImageSwiper :image-data="imageData.smartLabel" />
            </div>
          </dd>

          <dd class="card-item card-item-large card-content row reverse">
            <div class="right-part embed-image">
              <img
                class="phone-frame"
                :src="img.aggregatedcalendar"
                style="height: auto"
                alt="聚合日历"
              />
            </div>
            <div class="left-part">
              <h3 class="f-title">聚合日历</h3>
              <p class="f-describe">
                多应用来源日程，可在事件列表聚合展示，重要日程不错过。
              </p>
            </div>
          </dd>
        </dl>
      </div>
    </section>

    <!-- 第十五屏 onemind-title -->
    <section
      class="onemind-title f-section f-section-night flex items-center justify-center"
    >
      <img :src="img.title" alt="onemind 标题" :draggable="false" />
    </section>

    <!-- 第十六屏 onemind 标题 -->
    <section class="memory-optimization f-section f-section-night">
      <div>
        <h2 class="title text-center" style="color: rgb(255, 191, 60)">
          日常使用，丝滑流畅
        </h2>
        <SwiperTitleWrap :data="titleData.part1" />
      </div>
      <div>
        <h2 class="title text-center" style="color: rgb(56, 133, 255)">
          重度使用，爽快利落
        </h2>
        <SwiperTitleWrap :data="titleData.part2" />
      </div>
      <div>
        <h2 class="title text-center" style="color: rgb(12, 217, 235)">
          长久使用，持久安心
        </h2>
        <SwiperTitleWrap :data="titleData.part3" />
      </div>
    </section>

    <!-- 第十七屏 48个月全场景持久流畅 -->
    <section class="cttl-experiment flex items-center justify-center">
      <div class="introduce">
        <p class="validity">
          <strong>48</strong>
          <span>个月</span>
        </p>
        <p class="content">全场景持久流畅</p>
        <p class="desc">五星认证</p>
        <p class="desc1">
          数据来自泰尔实验室，<br />
          送测样机为 MEIZU 20 Pro 12GB/256GB。
        </p>
      </div>

      <div class="img-wrap flex items-center justify-center">
        <img :src="img.certificate" />
      </div>
    </section>

    <!-- 第十八屏 隐私安全 -->
    <section class="privacy-safe f-section">
      <div class="sticky sticky-content flex items-center justify-center">
        <strong class="left">隐私</strong>
        <img :src="img.privacysafe" />
        <strong>安全</strong>
      </div>
    </section>

    <!-- 第十九屏 私密保险箱  -->
    <section class="deposit-box f-section">
      <div class="f-title-wrap">
        <h2 class="f-title text-#fff">私密保险箱</h2>
        <p class="f-describe f-describe-night">
          通过本地可信执行环境加密存储你的账号密码、证件号、银行卡号等私密信息，系统和第三方应用在无授权情况下均无法获取。<br />
          在你的授权下，私密保险箱能够下一次填写时直接引用相关信息，更安全更便捷。
        </p>
      </div>

      <div class="text-center">
        <img :src="img.depositbox" />
      </div>
    </section>

    <!-- 第二十屏 隐身模式  -->
    <section class="stealth f-section bg-#000">
      <div class="f-title-wrap">
        <h2 class="f-title text-#fff">隐身模式</h2>
        <p class="f-describe f-describe-night">
          随时随地，进入控制中心即可限制应用使用定位、相机和录音，快速保障隐私安全。
        </p>
      </div>

      <div class="text-center">
        <img class="img-wrap" :src="img.incognitomode" />
      </div>
    </section>

    <!-- 第二十一屏 共享屏幕隐私保护 -->
    <section class="shared-screen f-section bg-#000">
      <div class="f-title-wrap">
        <h2 class="f-title text-#fff">共享屏幕隐私保护</h2>
        <p class="f-describe f-describe-night">
          共享屏幕时，自动隐藏消息通知详情、敏感应用窗口，还可随时主动暂停屏幕共享。
        </p>
      </div>

      <div class="text-center img-wrap">
        <img class="computer" :src="img.computer" />
        <img class="phone" :src="img.phone" />
      </div>
    </section>

    <!-- 第二十二屏 四大神器，持续守护 -->
    <section class="artifact f-section bg-#000">
      <div class="f-title-wrap">
        <h2 class="f-title text-#fff">四大神器，持续守护</h2>
      </div>

      <div class="flex justify-center">
        <img :src="img.artifact" />
      </div>
    </section>

    <!-- 第二十三屏 精彩继续 -->
    <section class="other-function f-section">
      <h2 class="f-title text-center">精彩继续</h2>
      <div class="flex justify-center">
        <img :src="img.functional" />
      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
@import "./style/index.scss";
</style>
